import React, { memo, useEffect } from 'react'
import { shallowEqual, useSelector, useDispatch } from 'react-redux'

import { getSizeImage } from '@/utils/format-utils'
import { getHotAnchorAction } from '../../store/actionCreators'

import { HotAnchorWrapper } from './style'
const MSNHotAnchor = memo(() => {

  const { hotAnchors } = useSelector( state => ({
    hotAnchors: state.getIn(['recommend','hotAnchors'])
  }),shallowEqual)
  const dispatch = useDispatch();

  useEffect(()=>{
    dispatch(getHotAnchorAction(5))
  },[dispatch])
  return (
    <HotAnchorWrapper>
      <div className='top'>
        <span>热门主播</span>
      </div>
      {
        hotAnchors.map( item => {
          return (
            <div key={item.id} className='item'>
              <a href="/todo">
                <img className='cover' src={getSizeImage(item.avatarUrl,40)} alt="" />
              </a>
              <div className='info'>
                <span className='text-nowrap'>{item.nickName}</span>
                <p className='text-nowrap'>歌手、出演过许多热播节目</p>
              </div>
            </div>
          )
        } )
      }
    </HotAnchorWrapper>
  )
})

export default MSNHotAnchor